<template>
  <div class="nav">
    <div class="navbar c_p">
      <router-link
        tag="li"
        class="li c_p"
        v-for="(item, index) in list"
        :key="index"
        :to="item.path"
        activeClass="li1"
      >
        <div class="icon1 c_p" v-if="index === 0"></div>
        <div class="icon2 c_p" v-if="index === 1"></div>
        <div class="icon3 c_p" v-if="index === 2"></div>
        <div class="icon4 c_p" v-if="index === 3"></div>
        <div class="font">
          <span>{{ item.name }}</span>
        </div>
        <div v-if="index === 2 && cart_num != ''" class="cartNum">
          {{ cart_num }}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import store from "@/store/index";
import axios from "axios";
export default {
  store,
  data() {
    return {
      list: [
        {
          name: "采购",
          path: "/home",
        },
        {
          name: "收益",
          path: "/profit",
        },
        {
          name: "购物车",
          path: "/cart",
        },
        {
          name: "我的",
          path: "/my",
        },
      ],
    };
  },
  computed: {
    cart_num() {
      return this.$store.state.cart_num;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.c_p {
  cursor: pointer;
}
.nav {
  width: 100%;
  height: 49px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
}
.navbar {
  width: 100%;
  height: 49px;
  background: #ffffff;
  box-shadow: -1px -1px 0px 0px #eeeeee;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  .li {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .cartNum {
      position: absolute;
      top: -4px;
      right: 0;
      background-color: #fdd30a;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 15px;
      width: auto;
      height: 15px;
      padding: 0 2px;
    }
    .icon1 {
      width: 19px;
      height: 18px;
      background: url("../assets/home/cg.png") no-repeat center / 19px 18px;
    }
    .icon2 {
      width: 18px;
      height: 18px;
      background: url("../assets/home/shy.png") no-repeat center / 18px 18px;
    }
    .icon3 {
      width: 22px;
      height: 22px;
      background: url("../assets/cart/cart1.png") no-repeat center / 22px 22px;
    }
    .icon4 {
      width: 17px;
      height: 20px;
      background: url("../assets/home/wd.png") no-repeat center / 17px 20px;
    }
    .font {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
      line-height: 12px;
      margin-top: 5px;
    }
  }
  .li1 {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    .icon1 {
      width: 19px;
      height: 18px;
      background: url("../assets/home/cgactive.png") no-repeat center / 19px
        18px;
    }
    .icon2 {
      width: 18px;
      height: 18px;
      background: url("../assets/home/shyactive.png") no-repeat center / 18px
        18px;
    }
    .icon3 {
      width: 22px;
      height: 22px;
      background: url("../assets/cart/cart.png") no-repeat center / 22px 22px;
    }
    .icon4 {
      width: 17px;
      height: 20px;
      background: url("../assets/home/wdactive.png") no-repeat center / 17px
        20px;
    }
    .font {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #232323;
      line-height: 12px;
      margin-top: 5px;
    }
  }
}
</style>